<template>
    <u-scroll-list :indicator="indicator" indicatorColor="#fcf4cb" indicatorActiveColor="#f0df7c">
        <view class="popup-container">
        	<view :class="['same', {'index-popup': item.selected}]" v-for="(item, index) in accountBookList" :key="item.id" :style="{backgroundColor: item.lightColor}" @click="selectAccountBook(item, index)">
        		<view class="account-name">
        			{{item.name}}
        		</view>
        		<view :class="['center-icon', 'iconfont', item.icon]" :style="{color: item.iconColor}"/>
        		<view class="bottom-tool">
        			<view class="iconfont icon-shezhi" @click="editAccountBook(item, index)"></view>
        			<view class="iconfont icon-jiaren"></view>
        		</view>
        	</view>
        	<view class="account-add same" @click="addAccountBook">
        		<view class="add-name">
        			{{addName}}
        		</view>
        		<view class="iconfont icon-jiahao2fill jiahao-icon">
        		</view>
        	</view>
        </view>
    </u-scroll-list>
</template>

<script>
    export default {
		props: {
			accountBookList: {
				type: Array,
				default: () => []
			}
		},
        data() {
            return {
				indicator: true,
                accountName: '牛逼',
				addName: '添加',
            }
        },
		methods: {
			/** 选中事件
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			selectAccountBook(item, index) {
				this.$emit("selectAccountBook", {item, index});
			},
			/** 点击账本编辑事件
			 * @param {Object} item 账本数据
			 */
			editAccountBook(item, index) {
				this.$emit("editAccountBook", item, index);
			},
			/** 新增账本
			 */
			addAccountBook() {
				this.$emit("addAccountBook");
			}
		},
		mounted() {
			
		},
    }
</script>

<style lang="scss">
	
	.popup-container {
		display: flex;
		padding-bottom: 20rpx;
	}
	
	/* // 弹出层 */
	.index-popup {
		// background-color: $themeYellowColor;
		border: 4rpx solid #5e568c;
	}
	
	.account-name {
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #5e568c;
	}
	
	/* // 钱包图标 */
	.center-icon {
		margin-top: 10rpx;
		font-size: 120rpx;
		// color: #d0d0d0;
		text-align: center;
		opacity: 0.3;
		margin-bottom: 20rpx;
		font-weight: 100;
	}
	
	/* // 下面工具栏 */
	.bottom-tool {
		color: #5e568c;
		display: flex;
		justify-content: space-between;
	}
	
	/* // 添加账本 */
	.account-add {
		background-color: white;
		color: #696969;
		text-align: center;
		border: 4rpx dashed #696969;
		margin-right: 20rpx;
	}
	
	.card {
		animation-duration: 6s; //动画持续时间完成
		animation-delay: 0s;  //动画延迟多久才开始
		animation-iteration-count: infinite;  //是否循环执行动画
	}
	
	.add-name {
		font-size: 35rpx;
		font-weight: 700;
	}
	
	/* // 加号图标 */
	.jiahao-icon {
		font-size: 100rpx;
		line-height: 230rpx;
	}
	
	/* // 共同属性 */
	.same {
		width: 160rpx;
		height: 230rpx;
		margin-left: 30rpx;
		padding: 20rpx;
		margin-top: 100rpx;
		border-radius: 20rpx;
		box-shadow: 0px 0px 2px #dfdede;
	}
</style>
